<!--
 * @Author: 刘美红 liumeihong@llootong.com
 * @Date: 2025-04-07 09:55:59
 * @LastEditors: 刘美红 liumeihong@llootong.com
 * @LastEditTime: 2025-04-30 10:11:54
 * @FilePath: \gzt-template\src\pages\firstpage\component\zhsj.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="zhsj-box">
    <div class="gl-item" v-for="(item, index) in list" :key="index">
      <div>
        <p class="text">{{ item.title }}</p>
        <p class="num">{{ item.num || 0 }}</p>
      </div>
      <img v-if="index === 0" src="@/assets/images/zhsj/1.png" />
      <img v-if="index === 1" src="@/assets/images/zhsj/2.png" />
      <img v-if="index === 2" src="@/assets/images/zhsj/3.png" />
      <img v-if="index === 3" src="@/assets/images/zhsj/4.png" />
    </div>
  </div>
</template>
<script setup>
import { onMounted } from 'vue';

const props = defineProps({
  allData: Object,
});

let list = ref([
  {
    title: '总事件数',
    num: '0',
  },
  {
    title: '紧急事件数',
    num: '0',
  },
  {
    title: '待研判事件数',
    num: '0',
  },
  {
    title: '完成研判事件数',
    num: '0',
  },
]);

watch(
  () => props.allData,
  (newval) => {
    if (newval.eventCnt) {
      console.log('ssssssssssssssssssssss', newval);
      list.value[0].num = newval.eventCnt;
      list.value[1].num = newval.importantCnt;
      list.value[2].num = newval.todoCnt;
      list.value[3].num = newval.judgedCnt;
    }
  },
  {
    deep: true,
    // immediate: true,
  }
);
</script>

<style lang="scss" scoped>
.zhsj-box {
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .gl-item {
    width: 24%;
    height: 100px;
    padding: 23px 30px 15px 40px;
    background: linear-gradient(
      180deg,
      #ddecff 0%,
      #ffffff 100%
    ); /* 更改背景颜色 */
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .text {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 14px;
      color: #2263bf;
      line-height: 20px;
    }
    .num {
      font-family: YouSheBiaoTiHei;
      font-size: 32px;
      color: #2263bf;
      line-height: 42px;
    }
  }
}
</style>
